<template>
  <div class="ju-self-portrait">
    <template v-if="quarterOptions.length">
      <div class="select-box">
        <el-select v-model="grainDate" placeholder="请选择" size="mini" value-key="name" @change="selectGrain('time')">
          <el-option
            v-for="item in quarterOptions"
            :key="item.year + item.quarter"
            :label="item.name"
            :value="item"></el-option>
        </el-select>
      </div>
      <JxResult :sourceList="assessData"></JxResult>
      <JxEffect :sourceList="assessData"></JxEffect>
    </template>
    <template v-else>
      <div class="empty-box">
        <img src="@images/jxgl/no_exam.png" alt="" />
        <div>暂无考核数据</div>
      </div>
    </template>
  </div>
</template>

<script>
import JxResult from './components/JxResult.vue'
import JxEffect from './components/JxEffect.vue'
import { getlistYearQuarter, getIndividualPerformance } from '@apis/api-intelligent.js'
export default {
  name: 'JuSelfPortrait',
  components: { JxResult, JxEffect },
  props: {},
  data() {
    return {
      quarterOptions: [
        {
          name: '2022年第一季度',
          quarter: '1',
          year: '2022',
        },
      ],
      grainDate: {
        name: '2022年第一季度',
        quarter: '1',
        year: '2022',
      },
      assessData: {},
    }
  },
  computed: {},
  filters: {},
  watch: {},
  created() {
    this.dataInit()
  },
  mounted() {},
  methods: {
    selectGrain() {
      this.getData()
    },
    async dataInit() {
      const { data } = await getlistYearQuarter()
      this.quarterOptions = data
      this.grainDate = this.quarterOptions[0]
      if (this.quarterOptions.length) {
        this.getData()
      }
    },
    getData() {
      getIndividualPerformance({
        quarter: this.grainDate.quarter,
        year: this.grainDate.year,
      }).then(res => {
        console.log('res.da :>> ', res.data)
        this.assessData = res.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.ju-self-portrait {
  position: relative;
  color: #8e95b2;
  height: 100%;
  overflow-y: auto;
  padding: 0 15px 10px;

  .select-box {
    position: absolute;
    right: 30px;
    top: 10px;
    height: 60px;
    line-height: 60px;
  }

  /deep/.usual-box {
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    box-shadow: rgba(137, 163, 195, 0.2) 0px 0px 20px 5px;
  }
  .empty-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #8e95b2;
    font-size: 18px;

    img {
      width: 25%;
    }
  }
}
</style>
